<template>
    <div class="app-container" style="background-color:white;color:rgba(0, 0, 0, 0.88);">
            <el-row :gutter="20" style="color:grey;">
                <el-col :span="20" style="margin-top:10px;">
                    <div style="margin-left:20px;display:flex;padding-top:5px;">
                       <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">名称：</div>
                            <div style="font-size:12px;color:black;">全自动生化分析仪</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">68分类：</div>
                            <div style="font-size:12px;color:black;">临床医学检验辅助设备 Ⅱ</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">属性：</div>
                            <div style="font-size:12px;color:black;">电子类医疗设备</div>
                        </div>
                    </div>
                    <div style="margin-left:20px;display:flex;padding-top:5px;">
                       <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">型号：</div>
                            <div style="font-size:12px;color:black;">全自动生化分析仪</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">序列号：</div>
                            <div style="font-size:12px;color:black;">临床医学检验辅助设备 Ⅱ</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">注册号：</div>
                            <div style="font-size:12px;color:black;">电子类医疗设备</div>
                        </div>
                    </div>
                    <div style="margin-left:20px;display:flex;padding-top:5px;">
                       <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">品牌：</div>
                            <div style="font-size:12px;color:black;">全自动生化分析仪</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">生产厂家：</div>
                            <div style="font-size:12px;color:black;">临床医学检验辅助设备 Ⅱ</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">出厂日期：</div>
                            <div style="font-size:12px;color:black;">电子类医疗设备</div>
                        </div>
                    </div>
                    <div style="margin-left:20px;display:flex;padding-top:5px;">
                       <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">价格：</div>
                            <div style="font-size:12px;color:black;">全自动生化分析仪</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">使用年限：</div>
                            <div style="font-size:12px;color:black;">临床医学检验辅助设备 Ⅱ</div>
                        </div>
                        <!-- <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">资产编码：</div>
                            <div style="font-size:12px;color:black;">电子类医疗设备</div>
                        </div> -->
                    </div>
                    <div style="margin-left:20px;display:flex;padding-top:5px;">
                       <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">放置位置：</div>
                            <div style="font-size:12px;color:black;">全自动生化分析仪</div>
                        </div>
                        <!-- <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">序列号：</div>
                            <div style="font-size:12px;color:black;">临床医学检验辅助设备 Ⅱ</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">注册号：</div>
                            <div style="font-size:12px;color:black;">电子类医疗设备</div>
                        </div> -->
                    </div>
                    <div style="margin-left:20px;display:flex;padding-top:5px;">
                       <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">管理等级：</div>
                            <div style="font-size:12px;color:black;">全自动生化分析仪</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">风险级别：</div>
                            <div style="font-size:12px;color:black;">临床医学检验辅助设备 Ⅱ</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">计量方式：</div>
                            <div style="font-size:12px;color:black;">电子类医疗设备</div>
                        </div>
                    </div>
                    <div style="margin-left:20px;display:flex;padding-top:5px;">
                       <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">可调配</div>
                            <div style="font-size:12px;color:black;">全自动生化分析仪</div>
                        </div>
                        <!-- <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">生产厂家：</div>
                            <div style="font-size:12px;color:black;">临床医学检验辅助设备 Ⅱ</div>
                        </div>
                        <div style="display:flex;width:30%">
                            <div style="margin-left:5px;width:30%;">出厂日期：</div>
                            <div style="font-size:12px;color:black;">电子类医疗设备</div>
                        </div> -->
                    </div>
                </el-col>
                   
                
                <el-col :span="4" >
                  <div style="text-align:right;margin-right:50px;">状态</div>
                  <div style="color:black;font-size:25px;text-align:right;margin-right:50px;">正常</div>
                </el-col>
             </el-row>

      
       <el-row :gutter="20">
        <div style="margin-left:20px;padding-top:5px;position:relative;">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" 
                active-text-color="#8BBAEA" @select="handleSelect">
            <el-menu-item index="1">运行报告</el-menu-item>
            <el-menu-item index="2">
            <span slot="title">运行记录</span></el-menu-item>
            </el-menu>
            <div style="position:absolute;right:80px;display:flex;top:30px;">
                <div>本周</div>
                <div style="margin-left:15px">本月</div>
                <div style="margin-left:15px">本年</div>
                <div style="margin-left:15px">
                    <el-date-picker
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                </div>
            </div>
            
        </div>
       </el-row>
       <el-row :gutter="20" v-show="show.chart">
        <el-col :span="14" style="border:0px" >
            <div class="echart-box1" ref="bar"></div>
        </el-col>
        <el-col :span="10" style="border:0px">

            <div class="echart-box" ref="pie"></div>
<!-- <e-charts  :option="chartOption.pie"></e-charts> -->
        </el-col>
       
       </el-row>
       <el-row :gutter="20" v-show="show.recordList">
        <el-table   
                            :data="pagination(curPage,10,datas.record)"
                            style="width:90%;margin-left:20px;"
                            max-height="250">
                            <el-table-column
                     
                            prop="date"
                            label="日期"
                         >
                            </el-table-column>
                            <el-table-column
                            prop="status"
                            label="运行状态"
                            
                           >
                            <template slot-scope="scope">
                              {{ getStatus(scope.row.status)}}
                            
                            </template>
                            </el-table-column>
                            <el-table-column
                            prop="total"
                            label="检测人数"
                          >
                            </el-table-column>
                            
                           
            </el-table>
            <div style="display:flex;margin-right:55%;" >
                <el-pagination
                v-show="datas.total>0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="curPage"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="datas.total">
                    </el-pagination>
            </div>
       </el-row>
       <el-row :gutter="20">
        <div style="margin-left:20px;padding-top:5px;position:relative;">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" 
            active-text-color="#8BBAEA" @select="handleSelect2">
            <el-menu-item index="1">巡检记录</el-menu-item>
            <el-menu-item index="2">保养记录</el-menu-item>
            <el-menu-item index="3">维修记录</el-menu-item>
          
            </el-menu>
            <div style="position:absolute;right:80px;display:flex;top:30px;">
                <div>巡检记录</div>
                <div style="margin-left:15px">保养记录</div>
                <div style="margin-left:15px">维修记录</div>
            </div>
                
        </div>
       </el-row>

       <el-row :gutter="20" >
        <el-table  
                            :data="checks.record"
                            style="width:90%;margin-left:20px;"
                            max-height="250">
                            <el-table-column
                     
                            prop="date"
                            label="工单编号"
                         >
                            </el-table-column>
                            <el-table-column
                            prop="status"
                            label="从属计划"
                           >
                            </el-table-column>
                            <el-table-column
                            prop="total"
                            label="开始时间"
                          >
                            </el-table-column>
                            
                            <el-table-column
                            prop="total"
                            label="结束时间"
                          >
                            </el-table-column>
                            <el-table-column
                            prop="total"
                            label="状态时间"
                          >
                            </el-table-column> 
                            <el-table-column
                            prop="total"
                            label="工程师"
                          >
                            </el-table-column> 
            </el-table>
            <div style="display:flex;margin-right:55%;" >
                <el-pagination
                v-show="checks.total>0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="100"
                    layout="total, prev, pager, next"
                    :total="checks.totals">
                    </el-pagination>
            </div>
       </el-row>

    </div>
</template>
<script >
import ds from '@/utils/test.json';
export default {
name:"test555",
computed: {

  chartOption(){
    return{
          bar:{
            serials:[],
            xDatas:[],
            // unit:this.$route.query.unit==1?'Kpa':'°C'
          },
          pie:{
            title: {
              // text: 'Referer of a Website',
              // subtext: 'Fake Data',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                // name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: 
                [{ value: this.onlineSize, name: '在线天数' },
     { value: this.offlineSize, name: '离线天数' }]
                ,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        }
      },

  option(){
        return{
          //  grid:this.showGrid(),
            // backgroundColor:"#A9AAAC",
            title:{
                // text:"左轴系温度柱状图",
                left:"center",
                textStyle: {
                fontSize: 10
                }
            },
            legend: {bottom:"-5px"},
            tooltip: {
                trigger: 'none',
                axisPointer: {
                type: 'cross'
                }
            },
            color:['#006FFF'],
            xAxis: [{
                // name:"1s更新", //
                nameTextStyle:{
                  color:"black",
                  fontSize:9
                },
                type: 'category',
                width:0.08,
                axisLabel: {
                  interval:0,
                  rotate:40,
                  fontSize:10,
                  margin:5,
                  color: 'black',// x轴字体颜色
                  // formatter: val => {
                  //   let result= ''
                  // const textLength = val.length
                  //   const limitNumber = 4 // 一行显示几个字
                  //   if (textLength > limitNumber) {
                  //     for (var i = 0; i < textLength; i += limitNumber) {
                  //       result += val.substring(i, i + limitNumber) + '\n'
                  //     }
                  //     result = result.trim() // 移除最后一个换行符
                  //   } else {
                  //     result = val
                  //   }
                  //   return result
                  // }
                },
                axisTick: {      // 坐标轴的刻度
                  show: true,    // 是否显示
                  inside: true,  // 是否朝内
                  length: 1,      // 长度
                  lineStyle: {
                    // color: 'red',  // 默认取轴线的颜色
                    width: 1,
                    type: 'solid'
                  }
                },
                axisLine: {
                  symbol: ['none', 'arrow'],  // 是否显示轴线箭头
                  symbolSize: [8, 8], // 箭头大小
                  symbolOffset: [0, 7],  // 箭头位置
                  inside: true,  // 是否朝内
                    onZero: false,
                    lineStyle: {
                    color: 'blue',
                    width: 1,
                    type: 'solid'
                  }
                },
                data:this.chartOption.bar.xDatas// x轴
            }],
            yAxis: {
              // interval:20,
                name:"统计检查",
                type: 'value',//y轴
                axisLine: {    // 坐标轴 轴线
                    show: true,  // 是否显示
                    //  -----   箭头 -----
                    symbol: ['none', 'arrow'],  // 是否显示轴线箭头
                    symbolSize: [8, 8],  // 箭头大小
                    symbolOffset: [0, 7], // 箭头位置

                    // ----- 线 -------
                    lineStyle: {
                      color: 'blue',
                      width: 1,
                      type: 'solid'
                    }
                },
                axisLabel: {      // 坐标轴的标签
                  fontSize:8,
                  show: true,    // 是否显示
                  inside: false,  // 是否朝内
                  rotate: 0,     // 旋转角度
                  margin: 5,     // 刻度标签与轴线之间的距离
                  color: 'red',  // 默认轴线的颜色
                },
                axisTick: {      // 坐标轴的刻度
                  show: true,    // 是否显示
                  inside: true,  // 是否朝内
                  length: 6,      // 长度
                  lineStyle: {
                    // color: 'red',  // 默认取轴线的颜色
                    width: 1,
                    type: 'solid'
                  }
                },
                splitLine: {    // gird 区域中的分割线
                show: false,   // 是否显示
                lineStyle: {
                  color: '#666',
                  width: 1,
                  type: 'dashed'
                }
              },
              splitArea: {     // 网格区域
                show: false   // 是否显示，默认为false
              }

            },
            series:this.chartOption.bar.serials
        }
    },
},
mounted() {
  
    // this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
            const pie = this.$refs.pie
            const mycart = this.$echarts.init(pie)
            mycart.setOption(this.chartOption.pie)

            const bar = this.$refs.bar
            const barChart = this.$echarts.init(bar)
            barChart.setOption(this.option)
  },

created(){
  // this.$route.query.depCode,
  let code="BC5180";
  switch (code) {
    case "cs":
    this.datas.record=  ds.data.cs;
      break;
      case "DR":
      this.datas.record=  ds.data.cs;
      break;
      case "EU5300":
      this.datas.record=  ds.data.cs;
      break;
      case "BS830":
      this.datas.record=  ds.data.cs;
      break;
      case "BC5180":
      this.datas.record= ds.data.cs;
      break;
    default:
      break;
  }
  
  //  this.deviceCodes.filter(v=>{
  //      return v.code== this.$route.query.deviceCode
  //  }).data;
   console.log(this.datas.record)
   this.datas.total=this.datas.record.length;

   let online = this.datas.record.filter((v) => {return "online"==v.status});
   let offline = this.datas.record.filter((v) => {return "offline"==v.status});
   this.onlineSize=online.length;
   this.offlineSize=offline.length;
   console.log(this.onlineSize,this.offlineSize)

  //  this.datasInit = this.data.record.subs
   this.chartOption.bar.xDatas=  this.datas.record.map(item=> {return item.date});
   this.chartOption.bar.serials=  [{
              type:'bar',
               barWidth: 8,
              barGap: 36, 
              data:  this.datas.record.map(item=> {return item.total}),
          }]
          // console.log(online.length ,offline.length)
    // this.chartOption.pie.series.data= 
    // [{ value: online.length, name: '在线天数' },
    //  { value: offline.length, name: '离线天数' }]


          // { value: 1048, name: '在线天数' },
          //         { value: 735, name: '离线天数' },
    
},


methods:{
  //分页
 pagination(page, pageSize, array) {
    var pageCount = page * pageSize;
    var pagepev = (page - 1) * pageSize;
    let data= array.filter((item, index) => {
        // console.log(item,index);
        return index < pageCount && index >= pagepev
    });
    return data
},
  getStatus(v){
    if(v=="online"){
      return "离线"
    }
    if(v=="offline"){
      return "在线"
    }

  },
    handleSelect2(key,keyPath){

    },
    handleSelect(key,keyPath){
      if(key==1){
        this.show.chart=true;
        this.show.recordList=false
      }
      else {
        this.show.chart=false;
        this.show.recordList=true
      }

    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.curPage=val;
        console.log(`当前页: ${val}`);
      }
},
data(){
    return{
      curPage:1,
      offlineSize:0,
      onlineSize:0,
        
        show:{
          chart:true,
          recordList:false
        },
        isRecord:false,
        currentPage1: 1,
        checks:{
            total:0,
            record:[]
        },
        datas:{
            total:0,
            record: [ ],
        },
       
        activeIndex: '1',
        activeIndex2: '1',
        value1: '',
    }
},

}
</script>
<style scoped>
.echart-box1{

width: 800px;
height: 350px;
/* border: 3px solid pink; */
/* margin: 20px auto; */
}
.echart-box{

            width: 500px;
            height: 350px;
            /* border: 3px solid pink; */
            /* margin: 20px auto; */
        }

</style>